<template>
	<view class="login-form-page":class="themeType==='light'?'bgc-deep-light':'bgc-deep'">
		<view class="head">
			<navigator url="/pages/index/index" open-type="switchTab"><text class="iconfont icon-shanchu2"></text><text>手机号登录</text></navigator>
		</view>
		<view class="dsc">
			登录体验更多精彩
			<view class="tips">
			未注册的手机号登陆后将自动创建账号
			</view>
		</view>
		 <view class="login-form-warp">
		    <uni-forms ref="login_form" :modelValue="loginForm" :rules="loginFormRules">
		        <uni-forms-item name="phone" class="form-item">
		            <uni-easyinput class="phone_input" type="text" v-model="loginForm.phone" placeholder="请输入手机号" />
		        </uni-forms-item>
	            <uni-forms-item name="captcha" class="form-item captcha">
		            <uni-easyinput type="text" v-model="loginForm.captcha" placeholder="请输入验证码" />
					<button v-if="!sending" type="default" size="mini" @click="sendCode" :loading="sending">发送验证码</button>
					<myuni-countdown v-else :second="10" @end="sending=false">发送中</myuni-countdown>
		        </uni-forms-item>
		    </uni-forms>
		    <button @click="submitForm" class="submit">登录</button>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex';
  export default {
	data(){
	  return{
		loginForm:{
			phone:'',
			captcha:''
		},
		loginFormRules:{
			 phone: {
			    // name 字段的校验规则
			    rules:[
					{
					  required:true,
					  pattern:/^[1]([3-9])[0-9]{9}$/,
					  errorMessage:'请填写合法手机号'
					}
			    ],
			    validateTrigger:'bind'
			},
			captcha:{
				rules:[
					{
					 required:true,
					 minLength: 4,
					 maxLength: 6,
					 errorMessage: '请输入4---6位数的验证码',
					}
				],
				validateTrigger:'bind'
			}
		},
		sending:false
	  }
	},
	computed:{
		...mapState(['themeType','userInfo']),
	},
	methods:{
		...mapMutations(['saveLoginInfo']),
		submitForm(){
			this.request({
				methods:"post",
				url:'/login/cellphone',
				data:{
				  phone:this.loginForm.phone,
				  captcha:this.loginForm.captcha
				}
			}).then(resulte=> {
				if(resulte.code===503){
					uni.showToast({
						title: '验证码错误',
						icon:'error',
						duration: 1000
					})
					return false
				}else{
					this.saveLoginInfo(resulte)
				}
			})
		},
		sendCode(){
			this.$refs.login_form.validateField('phone').then(res=>{
				this.sending=true
				this.request({
					url:'/captcha/sent',
					data:{
					  phone:this.loginForm.phone
					}
				}).then(resulte=> {
					console.log(resulte)
				})
			}).catch(err=>{
				this.loginForm.phone=""
				console.log(err)
			})
		}
	}
  }
</script>
<script module="render_focus" lang="renderjs">
	export default {
	 mounted(){
		document.getElementsByClassName('phone_input')[0].getElementsByClassName('uni-input-input')[0].focus()
	 }
	}
</script>
<style lang="scss" scoped>
.login-form-page{
	padding-top: 104rpx;
	/* #ifdef APP-PLUS */
	padding-top: 160rpx;
	/* #endif */
	width: 100vw;
	height: 100vh;
	.head{
		position: fixed;
		left: 0;
		top: 0;
		/* #ifdef APP-PLUS */
		padding-top: 56rpx;
		/* #endif */
		height: 104rpx;
		line-height: 104rpx;
		width: 100%;
		color: #535355;
		// background-color:#000000;
		navigator{
		  height:100%;
		  padding: 0 20rpx;
		}
		text{
			margin-left: 20rpx;
		}
	}
	.dsc{
		padding: 50rpx 20rpx;
		font-size: 36rpx !important;
		color: #fff;
		.tips{
			font-size: 28rpx;
			color: #535355 !important;
		}
	}
	.login-form-warp{
		padding: 0 20rpx;
		.form-item{
			// width: 70%;
		}
		::v-deep.uni-easyinput__content{
			border: unset;
			border-bottom: 1px solid #fff;
		}
		.captcha{
		  ::v-deep.uni-forms-item__content{
			display: flex;
			button{
				margin-left: 10rpx;
				width: 250rpx;
			}
			view{
				flex: 1;
			}
		  }
		}
		.submit{
			margin-top: 100rpx;
		}
	}
}
</style>
